<template>
  <el-dialog custom-class="post-audit-confirm" :visible.sync="selfVisible" width="400px" :show-close="false" @close="onDialogHide">
    <div slot="title" class="header">
      <span class="title">{{ title }}</span>
    </div>
    <div class="content">
      <div class="tips"><i class="el-icon-warning"></i>{{ tips }}</div>
      <div class="post-audit">
        <el-checkbox v-model="postToAuditSelf">{{ auditText }}</el-checkbox>
      </div>
    </div>
    <div class="footer" slot="footer">
      <el-button type="default" @click="selfVisible = false" size="small">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="small">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'PostAuditConfirm',
  components: {},
  props: {
    visible: {
      type: Boolean,
    },
    title: {
      type: String,
    },
    tips: {
      type: String,
    },
    auditText: {
      type: String,
    },
    postToAudit: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      selfVisible: false,
      postToAuditSelf: false,
    }
  },
  computed: {},
  watch: {
    visible(visible) {
      this.selfVisible = visible
      this.postToAuditSelf = this.postToAudit
    },
  },
  created() {},
  mounted() {},
  methods: {
    onDialogHide() {
      this.$emit('update:visible', false)
      this.$emit('closed')
    },
    onSubmit() {
      this.$emit('submit', this.postToAuditSelf, () => {
        this.selfVisible = false
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.post-audit-confirm {
  .header {
    display: flex;
    align-items: center;
    .title {
      font-size: 18px;
      font-weight: normal;
      color: #333;
    }
  }
  .content {
    .tips {
      font-size: 16px;
      i {
        font-size: 18px;
        color: #e6a23c;
        margin-right: 5px;
      }
    }
    .post-audit {
      margin-top: 15px;
    }
  }
}
</style>
